<template>
    <div style="width:100%;height:100%;overflow: hidden;">
     <div id="main-map">
        <!-- <div class="demonstration">
            <span style="color:white;padding-left: 5px;">设置透明度</span>
            <el-slider class="lider" v-model="value2"></el-slider>
        </div> -->
     </div>
      <div class='map-overlay top' style="display:none" ref='jj'>
        <div class='map-overlay-inner'>
        <label>Layer opacity: <span id='slider-value'>100%</span></label>
        <input id='slider' type='range' min='0' max='100' step='0' value='100' />
        </div>
      </div>
    </div>
</template>
<script>
import imag from '../../src/assets/timg.gif'
export default {
    data () {
        return {
         map:null,
         context:null,
         data :null,
         image:null,
         value2: 50,
        }
    },
    mounted() {
        this.init();
        var hh=this.$refs.jj;
        setTimeout(()=>{
            hh.style.display="block"
        },1500)
    },
    methods:{
        init(){
          this.smartmapx.mapbase = 'http://www.smartmapx.com';
          this.smartmapx.apikey = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJuYmYiOjE1MzcxODM1OTgsImRhdGEiOiJ7XCJsb2dpbl9uYW1lXCI6XCJyb290XCIsXCJnZW5kZXJcIjoyLFwidXNlcl9pZFwiOlwiZm1fc3lzdGVtX3VzZXJfcm9vdFwiLFwidXNlcl9uYW1lXCI6XCJyb290XCIsXCJ1c2VyX29yaWdpbl9pZFwiOlwiZm1fbG9jYWxcIixcInByb2R1Y3RfaWRcIjpcIlwiLFwiZXhwaXJlX3RpbWVcIjpcIlwiLFwic291cmNlX2lkXCI6XCJcIixcInR5cGVcIjpcIlwiLFwiY29ycF9pZFwiOlwiZm1fc3lzdGVtX2NvcnBcIn0iLCJleHAiOjQwOTI1OTkzNDksImp0aSI6ImFfNjhmZjBhZGY5OTcxNDQ0NThjNzViZWFiN2FjNTkzYWYifQ.W122WkT6QR4HZWbpalkpmirV9JWkDYcCkmNZoxCB_z8';
          this.map=new this.smartmapx.Map({
              container: 'main-map',
              mapId: 'map_id_1',
              center: [117.18423,39.040199],
              zoom: 7.9
            });
            this.map.addControl(new this.smartmapx.NavigationControl(),'top-right');
            this.map.addControl(new this.smartmapx.ScaleControl({
              maxWidth: 100,
              unit: 'm'
            }));
           var slider = document.getElementById('slider');
           var sliderValue = document.getElementById('slider-value');
            this.map.on('load',() =>{
                 this.map.addSource('google', {
                    "type": "raster",
                    "tiles": ["https://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}"],
                    "tileSize": 256
            });
                 this.map.addLayer({
                    "id": "google",
                    "type": "raster",
                    "source": "google"
            });
              slider.addEventListener('input', (e)=> {
                // Adjust the layers opacity. layer here is arbitrary - this could
                // be another layer name found in your style or a custom layer
                // added on the fly using `addSource`.
                this.map.setPaintProperty('google', 'raster-opacity', parseInt(e.target.value, 10) / 100);
                
                // Value indicator
                sliderValue.textContent = e.target.value + '%';
                });
            });
        }
    }
}
</script>
<style lang="less" scoped>
#main-map{
    width: 100%;
    height: 100%;
}
.demonstration{
    width: 200px;
    height: 50px;
    z-index:300;
    left:30px;
    top:20px;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
}
.el-slider /deep/ .el-slider__runway{
    margin:8px 0 !important;
}
.map-overlay {
    font:bold 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
    position: absolute;
    width: 25%;
    top: 80px;
    left: 0;
    padding: 10px;
}
 
.map-overlay .map-overlay-inner {
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow:0 1px 2px rgba(0, 0, 0, 0.20);
    border-radius: 3px;
    padding: 10px;
    margin-bottom: 10px;
}
 
.map-overlay label {
    display: block;
    margin: 0 0 10px;
    color:white;
}
 
.map-overlay input {
    background-color: transparent;
    display: inline-block;
    width: 100%;
    position: relative;
    margin: 0;
    cursor: ew-resize;
}
</style>